<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<!DOCTYPE html>

<html lang="ko">
	<head>
		<meta charset="UTF-8"/>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>여기에 제목을 입력하세요.</title>
		<!--모바일 웹 페이지 설정 -->
		<link rel="shortcut icon" href="assets/ico/favicon.png" />
		<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png" />
		<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png" />
		<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png" />
		<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png" />
		<!-- bootstrap -->
		<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" />
		<!--나눔고딕 웹 폰트 적용 -->
		<link rel="stylesheet" type="text/css" href="assets/css/nanumfont.css" />
		<!--반응형 웹을 지원하지 않을 경우 -->
		<!-- <link rel="stylesheet" href="assets/css/nonresponsive.css" /> -->
		<!--IE8 이하 버전 지원 -->
		<!--[if lt IE 9]>
		<script type="text/javascript" src="assets/js/html5shiv.js"></script>
		<script type="text/javascript" src="assets/js/respond.min.js"></script>
		<![endif]-->
		<!-- IE10 반응형 웹 버그 보완 -->
		<!--[if gt IE 9]>
		<link rel="stylesheet" type="text/css" href="assets/css/ie10.css" />
		<script type="text/javascript" src="assets/js/ie10.js"></script>
		<![endif]-->
		<link rel="stylesheet" type="text/css" href="assets/font-awesome-4.0.3/css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="assets/font-awesome/css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
		
		<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="assets/js/jquery.js"></script>
		<script type="text/javascript" src="assets/js/string.js"></script>
		<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
		
	<style type="text/css">
			.container {
				max-width: 2000px;
				padding-left: 0;
				padding-right: 0;
				margin-right: 0;
				margin-left: 0;
			}

			/*기본 속성*/
			body {
				padding-top: 50px;
				
			}

			ul, li {
				margin: 0;
				padding: 0;
				list-style: none;
			}

			/*상단바 스타일 속성*/
			nav.navbar {
				line-height: 50px;
			}

			.navbar span {
				color: #FFFFFF;
				font-size: 16px;
			}

			.nav_btns {
				width: 50px;
			}

			/*리스트 속성*/

			.list-case {
				border-bottom: 1px solid #CCCCCC;
				display: block;
			
				width: 100%;
				height: 100px;
				min-height: 100px;
				height: auto !important;
				
			}

			.alarm-thumbnail {
				
				float: left;
				height: 100%;
				width: 50px;
				text-align: center;
				min-height: 100px;
				height: auto !important;
			}

			input[type="checkbox"] {
				margin: 40px 0px 0px;
				line-height: normal;
			}
			div.list-case:after {
				content: ' ';
				display: block;
				float: none;
				clear: both;
			}

			/** section */

			.list-title {
				
				width: 100%;
				height: 33px;
				text-align: left;
				min-height: 33px;
				height: auto !important;
			}

			.list-section {
				
				width: 100%;
				height: 33px;
				text-align: left;
			}
			.list-section2 {
			    border-bottom:1.5px solid #000;
				width: 100%;
				height: 33px;
				text-align: left;
			
			}
			
			#title {
				position:fixed;
				left:33%;
			}
			#header-btn2{
				position: fixed;
				right: 0%;
				top: 10px;
			}
			
			
			.modal-dialog {

				width: 250px;
				height: 160px;
				
			    margin-top: 40px;
			    background: #FFFF00;
			}

			.modal-body {
				text-align: center;
				font-size: 15px;
				margin-top: 5px;
				
				margin-top: -10px;
			}
		

			.modal-footer button[type='button'] {
				width: 70px;
				position: relative;
				right: 15%;
			} 

		</style>	
	</head>



	<body>
	<!-- 팝업창 -->
		<div id="myModal" class="modal fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
			<div class="modal-dialog">
				
				
				<!--내용 영역 -->
				<div class="modal-body">
					<p>
						선택한 경로리스트를 삭제 하시겠습니까?
					</p>
				</div>
				<!--하단 영역 -->
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">
						NO
					</button>
					<button type="button" class="btn btn-default" >
						YES
					</button>
				</div>
			</div>
		</div>	
		
		<!-- 상단 해더 바 -->
			<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
				<div class="container text-center">
					<div class="pull-left">
						<button class="btn btn-info nav_btns" onclick="history.back();">
							<i class="icon-arrow-left"></i>
						</button>
					</div>
					<span>경로 라이브러리</span>
				</div>
			</nav>
	<!-- 상단 해더 끝 -->

	<div id="test" class="panel-group">
	</div>		
		
		<!--Javascript -->
		<script src="assets/js/jquery.js"></script>
		<script src="assets/js/bootstrap.min.js"></script>
		<script type="text/javascript">
		var dbSize = 1 * 1024 * 1024; 
		var journeyAlDB = openDatabase("JourneyAlDB", "1.0", "내 루트 알람DB", dbSize);
		
		
		
	$(function(){
		var t = '';
		for (var j = 0; j < localStorage.length; j++) {
			var key = localStorage.key(j);
			var response = JSON.parse(localStorage[key]);
			var time = new Date(key.substring(13, 26));
			
			
			t += '<div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse'
					+ j + '">';
			t += '<div class="list">';
			
			for (var i = 0; i < response.steps.length; i++) {
				if (response.steps[i].travel_mode == "TRANSIT") {
					t += '<img style="height: 20px; width: 20px" src="'
							+ response.steps[i].transit.line.vehicle.icon
							+ '">';
					t += response.steps[i].transit.departure_stop.name;
					if (response.steps[i].transit.line.short_name != null) {
						t += '<span style="background-color:'
								+ response.steps[i].transit.line.color 
								+ ';padding:0 4px;color:#ffffff">'
								+ response.steps[i].transit.line.short_name
								+ '</span>';
					} else if (response.steps[i].transit.line.short_name == null) {
						t += '<span style="background-color:'
							+ '#d24999' 
							+ ';padding:0 4px;color:#ffffff">'
							+ response.steps[i].transit.line.name
							+ '</span>';
					}
					t += '('
							+ response.steps[i].instructions
							+ ')';
					var dura = Math
							.ceil(response.steps[i].duration.value / 60);
					t += '[ 약 ' + dura + ' 분 ]';
					if (i != ((response.steps.length) - 1)) {
						t += '▶';
					}
					// t +=
					// response.steps[i].transit.line.vehicle.type;
				} else {
					t += '<img style="height: 20px; width: 20px" src="https://maps.gstatic.com/mapfiles/transit/iw/6/walk.png">';					
					t += '('
							+ response.steps[i].instructions
							+ ')';
					var dura = Math
							.ceil(response.steps[i].duration.value / 60);
					t += '[ 약 ' + dura + ' 분 ]';
					if (i != ((response.steps.length) - 1)) {
						t += '▶' ;
					}
				}

				if (i == (response.steps.length) - 1 && response.steps.length != 1) {
					t += '</div><div class="list"></div><div class="list">소요시간: ';
					var dur = Math
							.ceil(response.duration.value / 60);
					t += '약 '
							+ dur
							+ ' 분'
							+ ' 도착예정시간 : '
							+ response.arrival_time.text;
				}
			};
			t += '<i class="fa fa-caret-square-o-down fa-position"></i></div></a></h4></div>';
			t += '<div id="collapse' + j
					+ '" class="panel-collapse collapse">';
			t += '<div class="panel-body">';
			t += '<button class="list-btn1 btn btn-primary" ';
			t += 'onclick="location.href = ';
			t += '\'journey.jsp?';
			t += 'start=' + response.start_location.nb + "," + response.start_location.ob;
			t += '&end=' + response.end_location.nb + "," + response.end_location.ob;
			t += '&time=' + time.getTime() / 1000;
			t += '&journey=' + key.substring(26, 27);
			t += '\';return false;">지도보기</button>';
			t += '<button class="list-btn2 btn btn-primary rselect" value="' + key + '">경로선택</button>';
			t += '</div></div></div>';
		};
		$('#test').html(t);
		
		$('.rselect').click(function() {
			
			var al = result.rows.item(0)['is_al'];
			var info = result.rows.item(0)['al_info'];
			
			journeyAlDB.itemSelect = function(key) {
				journeyAlDB.transaction(function(tx){
					tx.executeSql("SELECT is_al, al_info FROM JourneyAlDB WHERE key=?"[key])
				})
			};
			
			var time = new Date();
			var key = time.getTime() + '' + $(this).val().substring(13,27);
			localStorage[key] = localStorage[$(this).val()];
			
			journeyAlDB.itemInsert = function(key, is_al, al_info) {
				journeyAlDB.transaction(function(tx){
					tx.executeSql("INSERT INTO journeyAlDB(key, is_al, al_info) VALUES (?,?,?)", [localStorage.key(localStorage.length-1), is_al, al_info], function() {}, function(tx, e) {
						console.log(e.message);
					});
				});
			};
			
			journeyAlDB.itemDelete = function(key) {
				journeyAlDB.transaction(function(tx){
					tx.executeSql("DELETE FROM journeyAlDB WHERE key=?", [key], function() {}, function(tx, e) {
						console.log(e.message);
					});
				});
			};
			
			localStorage.removeItem($(this).val());
			location.href = 'rout.jsp';
		});
	});
</script>
	</body>
</html>
